window.UUIDGeneratorRenderer = class UUIDGeneratorRenderer {
    static getHTML() {
        return `
            <div class="tool-content">
                <h2 class="text-3xl font-bold text-gray-800 mb-6 flex items-center">
                    <i data-feather="shuffle" class="mr-3"></i>
                    UUID生成器
                </h2>
                
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
                    <p class="text-blue-800">
                        <i data-feather="info" class="inline w-4 h-4 mr-1"></i>
                        生成各种格式的UUID（通用唯一标识符），支持测试数据创建、API开发和数据库记录标识
                    </p>
                </div>

                <div class="grid lg:grid-cols-2 gap-8">
                    <!-- 左侧：单个UUID生成 -->
                    <div class="space-y-6">
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                                <i data-feather="zap" class="w-5 h-5 mr-2"></i>
                                快速生成
                            </h3>
                            
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">UUID版本</label>
                                    <select id="uuid-version" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="v4">UUID v4 (随机UUID - 推荐)</option>
                                        <option value="v1">UUID v1 (基于时间戳)</option>
                                        <option value="nil">Nil UUID (全零UUID)</option>
                                    </select>
                                </div>

                                <button id="generate-single" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                                    <i data-feather="refresh-cw" class="w-4 h-4 mr-2"></i>
                                    生成UUID
                                </button>

                                <div class="relative">
                                    <input 
                                        type="text" 
                                        id="single-uuid-output" 
                                        readonly 
                                        placeholder="生成的UUID将显示在这里"
                                        class="w-full px-3 py-2 pr-12 border border-gray-300 rounded-lg bg-gray-50 font-mono text-sm"
                                    >
                                    <button id="copy-single" class="absolute right-2 top-2 p-1 text-gray-400 hover:text-gray-600 transition-colors">
                                        <i data-feather="copy" class="w-4 h-4"></i>
                                    </button>
                                </div>

                                <div class="flex space-x-2">
                                    <button id="regenerate-btn" class="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded-lg transition duration-200 flex items-center justify-center text-sm">
                                        <i data-feather="rotate-ccw" class="w-4 h-4 mr-1"></i>
                                        重新生成
                                    </button>
                                    <button id="format-convert" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-3 rounded-lg transition duration-200 flex items-center justify-center text-sm">
                                        <i data-feather="edit" class="w-4 h-4 mr-1"></i>
                                        格式转换
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- UUID验证解析 -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                                <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>
                                UUID验证与解析
                            </h3>
                            
                            <div class="space-y-4">
                                <div>
                                    <textarea 
                                        id="uuid-validate-input" 
                                        placeholder="粘贴要验证的UUID..."
                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
                                        rows="2"
                                    ></textarea>
                                </div>

                                <button id="validate-btn" class="w-full bg-orange-600 hover:bg-orange-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                                    <i data-feather="search" class="w-4 h-4 mr-2"></i>
                                    验证并解析
                                </button>

                                <div id="validation-result" class="hidden">
                                    <div class="bg-gray-50 rounded-lg p-4">
                                        <div id="validation-status" class="mb-3"></div>
                                        <div id="validation-details" class="text-sm space-y-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧：批量生成 -->
                    <div class="space-y-6">
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                                <i data-feather="layers" class="w-5 h-5 mr-2"></i>
                                批量生成
                            </h3>
                            
                            <div class="space-y-4">
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">生成数量</label>
                                        <input 
                                            type="number" 
                                            id="batch-count" 
                                            value="10" 
                                            min="1" 
                                            max="10000"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        >
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">UUID版本</label>
                                        <select id="batch-version" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                            <option value="v4">UUID v4</option>
                                            <option value="v1">UUID v1</option>
                                            <option value="nil">Nil UUID</option>
                                        </select>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">输出格式</label>
                                    <select id="output-format" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="standard">标准格式 (小写带连字符)</option>
                                        <option value="uppercase">大写格式 (大写带连字符)</option>
                                        <option value="no-dash">无连字符格式 (小写)</option>
                                        <option value="no-dash-uppercase">无连字符格式 (大写)</option>
                                        <option value="braces">花括号格式 {uuid}</option>
                                    </select>
                                </div>

                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">前缀</label>
                                        <input 
                                            type="text" 
                                            id="uuid-prefix" 
                                            placeholder="例如: id_"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        >
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">后缀</label>
                                        <input 
                                            type="text" 
                                            id="uuid-suffix" 
                                            placeholder="例如: _test"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        >
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">分隔符</label>
                                    <select id="separator" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="\\n">换行符</option>
                                        <option value=",">逗号</option>
                                        <option value=", ">逗号+空格</option>
                                        <option value=";">分号</option>
                                        <option value=" ">空格</option>
                                        <option value="\\t">制表符</option>
                                        <option value="|">竖线</option>
                                    </select>
                                </div>

                                <button id="generate-batch" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
                                    <i data-feather="layers" class="w-4 h-4 mr-2"></i>
                                    批量生成UUID
                                </button>
                            </div>
                        </div>

                        <!-- 批量输出区域 -->
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <div class="flex justify-between items-center mb-4">
                                <h3 class="text-lg font-semibold text-gray-800">生成结果</h3>
                                <div class="flex space-x-2">
                                    <button id="copy-batch" class="bg-green-600 hover:bg-green-700 text-white text-sm px-3 py-1 rounded flex items-center">
                                        <i data-feather="copy" class="w-4 h-4 mr-1"></i>
                                        复制全部
                                    </button>
                                    <button id="download-batch" class="bg-gray-600 hover:bg-gray-700 text-white text-sm px-3 py-1 rounded flex items-center">
                                        <i data-feather="download" class="w-4 h-4 mr-1"></i>
                                        下载
                                    </button>
                                    <button id="clear-batch" class="bg-red-600 hover:bg-red-700 text-white text-sm px-3 py-1 rounded flex items-center">
                                        <i data-feather="trash-2" class="w-4 h-4 mr-1"></i>
                                        清空
                                    </button>
                                </div>
                            </div>
                            
                            <textarea 
                                id="batch-output" 
                                readonly
                                placeholder="批量生成的UUID将显示在这里..."
                                class="w-full h-64 px-3 py-2 border border-gray-300 rounded-lg bg-gray-50 font-mono text-sm resize-none"
                            ></textarea>
                            
                            <div class="text-sm text-gray-600 mt-2">
                                <span id="batch-stats">等待生成...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 格式转换模态框 -->
                <div id="format-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
                    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-4">UUID格式转换</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">选择目标格式</label>
                                <select id="target-format" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <option value="standard">标准格式 (小写带连字符)</option>
                                    <option value="uppercase">大写格式 (大写带连字符)</option>
                                    <option value="lowercase">小写格式 (小写带连字符)</option>
                                    <option value="no-dash">无连字符格式 (小写)</option>
                                    <option value="no-dash-uppercase">无连字符格式 (大写)</option>
                                    <option value="braces">花括号格式 {uuid}</option>
                                </select>
                            </div>

                            <div class="relative">
                                <input 
                                    type="text" 
                                    id="converted-uuid" 
                                    readonly
                                    class="w-full px-3 py-2 pr-12 border border-gray-300 rounded-lg bg-gray-50 font-mono text-sm"
                                >
                                <button id="copy-converted" class="absolute right-2 top-2 p-1 text-gray-400 hover:text-gray-600 transition-colors">
                                    <i data-feather="copy" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>

                        <div class="flex justify-end space-x-2 mt-6">
                            <button id="close-modal" class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors">关闭</button>
                        </div>
                    </div>
                </div>

                <!-- 常用UUID格式说明 -->
                <div class="mt-8 bg-gray-50 rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">UUID格式说明</h3>
                    <div class="grid md:grid-cols-2 gap-6 text-sm">
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">UUID版本</h4>
                            <ul class="space-y-2 text-gray-600">
                                <li><strong>v4 (随机):</strong> 完全随机生成，最常用</li>
                                <li><strong>v1 (时间戳):</strong> 基于时间和MAC地址</li>
                                <li><strong>Nil:</strong> 全零UUID，用于特殊用途</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">使用场景</h4>
                            <ul class="space-y-2 text-gray-600">
                                <li><strong>API开发:</strong> 唯一资源标识符</li>
                                <li><strong>数据库:</strong> 主键或外键</li>
                                <li><strong>测试数据:</strong> 模拟用户ID、订单号等</li>
                                <li><strong>文件命名:</strong> 避免文件名冲突</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    static init() {
        // 基本元素
        const generateSingleBtn = document.getElementById('generate-single');
        const regenerateBtn = document.getElementById('regenerate-btn');
        const singleUuidOutput = document.getElementById('single-uuid-output');
        const copySingleBtn = document.getElementById('copy-single');
        const formatConvertBtn = document.getElementById('format-convert');
        
        // 批量生成
        const generateBatchBtn = document.getElementById('generate-batch');
        const batchOutput = document.getElementById('batch-output');
        const copyBatchBtn = document.getElementById('copy-batch');
        const downloadBatchBtn = document.getElementById('download-batch');
        const clearBatchBtn = document.getElementById('clear-batch');
        const batchStats = document.getElementById('batch-stats');
        
        // 验证解析
        const validateBtn = document.getElementById('validate-btn');
        const validateInput = document.getElementById('uuid-validate-input');
        const validationResult = document.getElementById('validation-result');
        const validationStatus = document.getElementById('validation-status');
        const validationDetails = document.getElementById('validation-details');
        
        // 格式转换模态框
        const formatModal = document.getElementById('format-modal');
        const closeModalBtn = document.getElementById('close-modal');
        const targetFormat = document.getElementById('target-format');
        const convertedUuid = document.getElementById('converted-uuid');
        const copyConvertedBtn = document.getElementById('copy-converted');

        let currentUuid = '';

        // 生成单个UUID
        const generateSingle = () => {
            const version = document.getElementById('uuid-version').value;
            let result;
            
            switch (version) {
                case 'v1':
                    result = UUIDGenerator.generateV1();
                    break;
                case 'nil':
                    result = UUIDGenerator.generateNil();
                    break;
                case 'v4':
                default:
                    result = UUIDGenerator.generateV4();
                    break;
            }
            
            if (result.success) {
                currentUuid = result.data;
                singleUuidOutput.value = currentUuid;
                singleUuidOutput.classList.add('success-border');
                setTimeout(() => {
                    singleUuidOutput.classList.remove('success-border');
                }, 2000);
            } else {
                DevToolsUtils.showToast(result.error, 'error');
            }
        };

        // 批量生成UUID
        const generateBatch = () => {
            const count = parseInt(document.getElementById('batch-count').value) || 10;
            const version = document.getElementById('batch-version').value;
            const format = document.getElementById('output-format').value;
            const prefix = document.getElementById('uuid-prefix').value || '';
            const suffix = document.getElementById('uuid-suffix').value || '';
            const separator = document.getElementById('separator').value.replace('\\n', '\n').replace('\\t', '\t');
            
            DevToolsUtils.addLoading(generateBatchBtn, '生成中...');
            
            setTimeout(() => {
                const options = {
                    format,
                    separator,
                    prefix,
                    suffix,
                    uppercase: format.includes('uppercase'),
                    removeDashes: format.includes('no-dash')
                };
                
                const result = UUIDGenerator.generateBatch(count, version, options);
                
                if (result.success) {
                    batchOutput.value = result.data.output;
                    batchStats.textContent = `已生成 ${result.data.count} 个UUID`;
                    DevToolsUtils.showToast(`已生成 ${result.data.count} 个UUID`, 'success');
                } else {
                    DevToolsUtils.showToast(result.error, 'error');
                    batchStats.textContent = '生成失败';
                }
                
                DevToolsUtils.removeLoading(generateBatchBtn, '批量生成UUID');
            }, 100);
        };

        // UUID验证和解析
        const validateUuid = () => {
            const uuid = validateInput.value.trim();
            if (!uuid) {
                DevToolsUtils.showToast('请输入要验证的UUID', 'error');
                return;
            }

            const validateResult = UUIDGenerator.validate(uuid);
            const parseResult = UUIDGenerator.parse(uuid);
            
            validationResult.classList.remove('hidden');
            
            if (validateResult.success && validateResult.data.valid) {
                validationStatus.innerHTML = `
                    <div class="flex items-center text-green-600">
                        <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>
                        <span class="font-medium">有效的UUID</span>
                    </div>
                `;
                
                if (parseResult.success) {
                    const info = parseResult.data;
                    let detailsHtml = `
                        <div><strong>版本:</strong> ${info.version || '未知'}</div>
                        <div><strong>格式:</strong> ${info.format}</div>
                        <div><strong>标准形式:</strong> <code class="bg-gray-200 px-1 rounded">${info.uuid}</code></div>
                    `;
                    
                    if (info.timestamp && !info.timestamp.error) {
                        detailsHtml += `
                            <div><strong>时间戳:</strong> ${info.timestamp.date}</div>
                            <div><strong>Unix时间:</strong> ${info.timestamp.unix}</div>
                        `;
                    }
                    
                    validationDetails.innerHTML = detailsHtml;
                }
                
                setTimeout(() => feather.replace(), 100);
            } else {
                validationStatus.innerHTML = `
                    <div class="flex items-center text-red-600">
                        <i data-feather="x-circle" class="w-5 h-5 mr-2"></i>
                        <span class="font-medium">无效的UUID</span>
                    </div>
                `;
                validationDetails.innerHTML = `<div class="text-red-600">${validateResult.data?.error || '格式错误'}</div>`;
                setTimeout(() => feather.replace(), 100);
            }
        };

        // 格式转换
        const showFormatModal = () => {
            if (!currentUuid) {
                DevToolsUtils.showToast('请先生成一个UUID', 'error');
                return;
            }
            
            formatModal.classList.remove('hidden');
            formatModal.classList.add('flex');
            convertFormat();
        };

        const convertFormat = () => {
            if (!currentUuid) return;
            
            const format = targetFormat.value;
            const result = UUIDGenerator.convertFormat(currentUuid, format);
            
            if (result.success) {
                convertedUuid.value = result.data;
            } else {
                DevToolsUtils.showToast(result.error, 'error');
            }
        };

        const closeModal = () => {
            formatModal.classList.add('hidden');
            formatModal.classList.remove('flex');
        };

        // 事件监听器
        generateSingleBtn.addEventListener('click', generateSingle);
        regenerateBtn.addEventListener('click', generateSingle);
        generateBatchBtn.addEventListener('click', generateBatch);
        validateBtn.addEventListener('click', validateUuid);
        formatConvertBtn.addEventListener('click', showFormatModal);
        closeModalBtn.addEventListener('click', closeModal);
        targetFormat.addEventListener('change', convertFormat);

        // 复制功能
        copySingleBtn.addEventListener('click', async () => {
            if (!singleUuidOutput.value) {
                DevToolsUtils.showToast('没有可复制的内容', 'error');
                return;
            }
            
            const success = await DevToolsUtils.copyToClipboard(singleUuidOutput.value);
            if (success) {
                DevToolsUtils.showToast('已复制到剪贴板', 'success');
            }
        });

        copyBatchBtn.addEventListener('click', async () => {
            if (!batchOutput.value.trim()) {
                DevToolsUtils.showToast('没有可复制的内容', 'error');
                return;
            }
            
            const success = await DevToolsUtils.copyToClipboard(batchOutput.value);
            if (success) {
                DevToolsUtils.showToast('已复制到剪贴板', 'success');
            }
        });

        copyConvertedBtn.addEventListener('click', async () => {
            if (!convertedUuid.value) {
                DevToolsUtils.showToast('没有可复制的内容', 'error');
                return;
            }
            
            const success = await DevToolsUtils.copyToClipboard(convertedUuid.value);
            if (success) {
                DevToolsUtils.showToast('已复制到剪贴板', 'success');
            }
        });

        // 下载功能
        downloadBatchBtn.addEventListener('click', () => {
            if (!batchOutput.value.trim()) {
                DevToolsUtils.showToast('没有可下载的内容', 'error');
                return;
            }

            const filename = `uuids_${new Date().getTime()}.txt`;
            const blob = new Blob([batchOutput.value], { type: 'text/plain;charset=utf-8' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            DevToolsUtils.showToast('文件下载已开始', 'success');
        });

        // 清空功能
        clearBatchBtn.addEventListener('click', () => {
            batchOutput.value = '';
            batchStats.textContent = '等待生成...';
        });

        // 键盘快捷键
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'Enter') {
                generateSingle();
            }
        });

        // 模态框点击外部关闭
        formatModal.addEventListener('click', (e) => {
            if (e.target === formatModal) {
                closeModal();
            }
        });

        // 初始生成一个UUID
        generateSingle();

        // 初始化图标
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }
};